<template>
  <form-dialop
    :title="$t('order.changeOrderStatus')"
    :visible="visible"
    width="35%"
    @handleClose="handleClose"
  >
    <template #content>
      <div v-loading="loading">
        <el-form
          ref="form"
          :model="formData"
          label-width="120px"
        >
          <el-form-item
            :label="$t('order.orderStatus')"
            prop="status"
            name="status"
          >
            <el-select v-model="value" :placeholder="$t('order.selectOrderStatus')">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
        </el-form>
        <div :class="language == 'en' ? 'tips tips-en' : 'tips tips-zh'">
          <p style="color:red">{{ $t('order.statusTips1') }}</p>
          <p>{{ $t('order.statusTips2') }}</p>
          <p>{{ $t('order.statusTips3') }}</p>
          <p>{{ $t('order.statusTips4') }}</p>
        </div>
      </div>
    </template>
    <template #footer>
      <el-button @click="handleClose">{{ $t("common.cancel") }}</el-button>
      <el-button type="primary" @click="submit" :disabled="loading">{{
        $t("common.confirm")
      }}</el-button>
    </template>
  </form-dialop>
</template>
<script lang="ts">
import Vue from "vue";
import FormDialop from "../../../components/Dialog/formDialog.vue";
import { AppModule } from "../../../store/modules/app";
export default Vue.extend({
  components: {
    FormDialop,
  },
  data() {
    return {
      visible: false,
      loading: false,
      language: AppModule.language,
      formData: {
        status: '',
      },
      options: [{
        value: 'successful',
        label: this.$t('order.status.successful')
      }, {
        value: 'failed',
        label: this.$t('order.status.failed')
      },{
        value: 'doing',
        label: this.$t('order.status.doing')
      }],
      value: '',
      orderData: '',
    };
  },
  created() {},
  methods: {
    init(obj: any) {
      this.orderData = JSON.parse(JSON.stringify(obj));
      // console.log(this.orderData)
      if((this as any).orderData.status == 'successful' || (this as any).orderData.status == 'failed' || (this as any).orderData.status == 'doing' ){
        this.value = (this as any).orderData.status;
      }else {
        (this as any).orderData.status == ''
      }
      this.$nextTick(() => {
        if (this.$refs["form"]) {
          (this.$refs["form"] as any).clearValidate();
        }
      });
      this.visible = true;
    },
    submit() {
      (this.$refs.form as any).validate((valid: any) => {
        if (valid) {
					this.loading = true;
          const data = {
            status: this.value
          }
          this.$orinusApi.apiPatchOrderStatus((this as any).orderData.id, data).then((res: any) => {
            if(res.id) {
              this.$message.success((this as any).$t('order.changeOrderStatusSuccess'));
              this.$emit('success');
              this.loading = false;
              this.visible = false;
            }else {
              this.$message.warning((this as any).$t('order.changeOrderStatusFail'));
              this.loading = false;
            }
          }).catch(() => {
            this.$message.warning((this as any).$t('order.changeOrderStatusFail'));
            this.loading = false;
          })
        }
      });
    },
    handleClose() {
      (this.formData = {
        status: '',
      }),
      (this.visible = false);
      this.loading = false;
    },
  },
});
</script>
<style scoped>
.tips {
  font-size: 12px;
}
.tips ul{
  list-style: none;
}
.tips li {
  margin: 14px 0px;
}
.tips-zh {
  margin-left: 119px;
}
.tips-en {
  margin-left: 119px;
}
</style>
